<template>
    <el-pagination v-model:currentPage="currentPage" v-model:pageSize="pageSize" v-bind="customProps"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" class="custom-pagination theme"
        layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 40]" :background="true"
        size='small' />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { PaginationProps } from 'element-plus';

interface CustomPaginationProps extends PaginationProps {
    modelValue: number; // 当前页码
    pageSize: number;  // 每页显示条数
    total: number;     // 总条数
}

const props = defineProps<CustomPaginationProps>();
const emit = defineEmits(['update:modelValue', 'update:pageSize', 'pagination']);
const customProps = computed(() => {
    const { currentPage, pageSize, ...rest } = props;
    return rest;
})
const currentPage = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const pageSize = computed({
    get: () => props.pageSize,
    set: (value) => emit('update:pageSize', value),
});

const handleSizeChange = (newPageSize: number) => {
    emit('update:pageSize', newPageSize);
    emit('pagination', { currentPage: currentPage.value, pageSize: newPageSize });
};

const handleCurrentChange = (newCurrentPage: number) => {
    emit('update:modelValue', newCurrentPage);
    emit('pagination', { currentPage: newCurrentPage, pageSize: pageSize.value });
};
</script>

<style lang="less">
.custom-pagination {
    --el-disabled-bg-color: var(--border-color);
    --el-color-primary: var(--theme-color);
    --el-pagination-button-color: var(--main-text-color);
    --el-pagination-button-bg-color: var(--border-color);
    --el-text-color-regular: var(--main-text-color);
    --el-fill-color-blank: var(--border-color);
    --el-bg-color-overlay: var(--main-bg-color);
    --el-fill-color-light: var(--theme-hover-color);
}
</style>